<template>
  <div
    v-infinite-scroll="getMoreDynamic"
    class="main"
    :infinite-scroll-disabled="disabledScroll"
    :infinite-scroll-immediate="false"
  >
    <el-backtop target=".main"></el-backtop>
    <Header />
    <div class="dynamic">
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="user__info border--radius">
            <el-avatar :src="avatar" :size="80"></el-avatar>
            <el-row class="user__name">{{ user.name }}</el-row>
            <el-row class="user__num">
              <el-col :span="12">
                <nuxt-link to="/user/follow">
                  <el-row class="user__num__showNum"> {{ user.follow }}</el-row>
                  <el-row class="user__num__text">关注了</el-row>
                </nuxt-link>
              </el-col>
              <el-col :span="12">
                <nuxt-link to="/user/fans">
                  <el-row class="user__num__showNum">{{ user.fans }}</el-row>
                  <el-row class="user__num__text">
                    关注者
                  </el-row>
                </nuxt-link>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="14">
          <ul class="dynamic__list  border--radius">
            <Item
              v-for="(item, index) in list"
              :key="index"
              :item="item"
              :class="index !== list.length - 1 ? 'dynamic__list__item' : ''"
            />
          </ul>
        </el-col>
        <el-col :span="6">
          <div class="rank__list border--radius">
            <Rank :title="'日榜'" :rank="rank.day" style="margin-top:0px" />
          </div>
        </el-col>
      </el-row>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/public/header/index'
import Footer from '@/components/public/footer/index'
import Rank from '@/components/news/Rank'
import Item from '@/components/dynamic/item'
const limit = 10
export default {
  name: 'Dynamic',
  layout: 'blank',
  components: { Rank, Item, Header, Footer },
  data() {
    return {
      page: 1,
      disabledScroll: false
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    },
    avatar() {
      return this.$store.getters['user/avatar']
    }
  },
  async asyncData({ app, params, store }) {
    let rank = {}
    let list = []
    const { status: statusRank, data: dataRank } = await app.$axios.get(
      `/news/rank`
    )
    if (statusRank === 200 && dataRank.code === 1) {
      rank = dataRank.data
    }
    const { status: statusDynamic, data: dataDynamic } = await app.$axios.get(
      '/user/dynamic',
      {
        params: {
          id: store.state.user.id,
          page: 1,
          limit
        }
      }
    )
    if (statusDynamic === 200 && dataDynamic.code === 1) {
      list = dataDynamic.data
    }
    return { rank, list }
  },
  middleware: 'isAuthenticated',
  methods: {
    async getMoreDynamic() {
      const {
        status: statusDynamic,
        data: dataDynamic
      } = await this.$axios.get('/user/dynamic', {
        params: {
          id: this.$store.state.user.id,
          page: ++this.page,
          limit
        }
      })
      if (statusDynamic === 200) {
        if (dataDynamic.code === 1) {
          this.list.push(...dataDynamic.data)
        } else if (dataDynamic.code === -1) {
          this.$message({
            message: dataDynamic.msg,
            type: 'error'
          })
          this.disabledScroll = true
          this.page--
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
}
.dynamic {
  margin: 20px auto;
  // margin-top: 20px;
  width: $--typeArea;
  // height: calc(100vh - 85px) !important ;
}

.user__info {
  height: 240px;
  background: #fff;
  @include flexCenter($fd: column);
  > .el-row {
    width: 100%;
    @include flexCenter();
  }
}
.user__name {
  margin-top: 10px;
  @include font();
}
.user__num {
  margin-top: 10px;
  > .el-col {
    cursor: pointer;
  }
  .el-row {
    @include flexCenter($fd: column);
  }
}
.user__num__text {
  margin-top: 6px;
  @include font(12px, 700, #99a2aa);
  &:hover {
    color: $--color-primary;
    cursor: pointer;
  }
}
.user__num__showNum {
  @include font(16px, 400, $--color-primary);
}
.dynamic__list {
  background: #fff;
  @include scroll();
}
.dynamic__list__item {
  border-bottom: 1px #eee solid;
}
.rank__list {
  padding: 10px 8px;
  background: #fff;
}
</style>
